<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>大麦网-演唱会页面-使用模板引擎</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="./css/index01.css">
</head>

<body>
    <div class="container">
        <ul class="flex list" id="city">
            <li>城市：</li>
            <!-- 第二步：在网页中定义模板 -->
            <script id="city_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0?'active':''}}">{{item.city}}</li>
                {{/each}}
            </script>
        </ul>
        <ul class="flex list" id="type">
            <li>分类：</li>
            <script id="type_template" type="text/html">
                {{each $data item index}}
                    <li class="{{index===0?'active':''}}">{{item.type}}</li>
                {{/each}}
            </script>
        </ul>
        <div class="content">
            <script id="show_template" type="text/html">
                {{each $data item index}}
                <div class="show flex">
                    <img
                        src="{{item.img}}">
                    <ul>
                        <li class="title">{{item.title}}</li>
                        <li>{{item.city}}</li>
                        <li>{{item.type}}</li>
                        <li>{{item.time}}</li>
                    </ul>
                </div>
                {{/each}}
            </script>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <!-- 第一步：引入artTemplate模板引擎库 -->
    <script src="./js/artTemplate.js"></script>
    <script>
        //ajax请求数据，并将数据在页面中显示
        //加载城市数据
        $.get("./data/city.json", (res) => {
            //第三步：通过template()方法，将数据传给模板，返回生成的html内容
            let html = template("city_template",res)
            //第四步：将生成的html内容，放置到网页的指定区域
            $('#city').append(html)
        });
        //加载分类数据
        $.get("./data/type.json", (res) => {
            let html = template('type_template',res)
            $('#type').append(html)
        });
        //加载内容数据
        $.get("./data/show.json", (res) => {
            let html = template('show_template',res)
            $('.content').append(html)
        });
    </script>
</body>

</html>